<template>
  <view class="container">
    <!-- 反馈表单 -->
    <view class="feedback-form">
      <!-- 反馈类型 -->
      <view class="form-item">
        <view class="label">反馈类型</view>
        <view class="type-list">
          <view 
            class="type-item" 
            v-for="(type, index) in feedbackTypes" 
            :key="index"
            :class="{ active: form.type === type.value }"
            @click="selectType(type.value)"
          >
            <text>{{ type.label }}</text>
          </view>
        </view>
      </view>
      
      <!-- 问题描述 -->
      <view class="form-item">
        <view class="label">问题描述</view>
        <textarea 
          class="textarea" 
          v-model="form.content" 
          placeholder="请详细描述您遇到的问题，以便我们更好地帮助您解决"
          maxlength="500"
        />
        <view class="word-count">{{ form.content.length }}/500</view>
      </view>
      
      <!-- 图片上传 -->
      <view class="form-item">
        <view class="label">上传图片（选填）</view>
        <view class="upload-box">
          <view 
            class="image-item" 
            v-for="(image, index) in form.images" 
            :key="index"
          >
            <image :src="image" mode="aspectFill" />
            <view class="delete-btn" @click="deleteImage(index)">
              <text class="iconfont icon-close"></text>
            </view>
          </view>
          
          <view 
            class="upload-btn" 
            v-if="form.images.length < 3"
            @click="chooseImage"
          >
            <text class="iconfont icon-camera"></text>
            <text>上传图片</text>
          </view>
        </view>
        <view class="upload-tip">最多上传3张图片</view>
      </view>
      
      <!-- 联系方式 -->
      <view class="form-item">
        <view class="label">联系方式（选填）</view>
        <input 
          class="input" 
          v-model="form.contact" 
          placeholder="请留下您的手机号或邮箱，方便我们联系您"
        />
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <view class="submit-box">
      <button 
        class="submit-btn" 
        :disabled="!isValid"
        @click="submitFeedback"
      >
        提交反馈
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

// 反馈类型列表
const feedbackTypes = [
  { label: '功能异常', value: 'bug' },
  { label: '体验问题', value: 'experience' },
  { label: '功能建议', value: 'suggestion' },
  { label: '其他问题', value: 'other' }
];

// 表单数据
const form = ref({
  type: '',
  content: '',
  images: [] as string[],
  contact: ''
});

// 表单验证
const isValid = computed(() => {
  return form.value.type && form.value.content.trim().length > 0;
});

// 选择反馈类型
const selectType = (type: string) => {
  form.value.type = type;
};

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 3 - form.value.images.length,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      form.value.images = [...form.value.images, ...res.tempFilePaths];
    }
  });
};

// 删除图片
const deleteImage = (index: number) => {
  form.value.images.splice(index, 1);
};

// 提交反馈
const submitFeedback = async () => {
  if (!isValid.value) return;
  
  try {
    uni.showLoading({
      title: '提交中'
    });
    
    // TODO: 调用API提交数据
    // const res = await submitFeedback({
    //   type: form.value.type,
    //   content: form.value.content,
    //   images: form.value.images,
    //   contact: form.value.contact
    // });
    
    // 模拟提交
    await new Promise(resolve => setTimeout(resolve, 1500));
    
    uni.hideLoading();
    uni.showToast({
      title: '提交成功',
      icon: 'success'
    });
    
    // 重置表单
    form.value = {
      type: '',
      content: '',
      images: [],
      contact: ''
    };
    
    // 返回上一页
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  } catch (error) {
    uni.hideLoading();
    uni.showToast({
      title: '提交失败',
      icon: 'none'
    });
  }
};
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 120rpx;
}

.feedback-form {
  padding: 30rpx;
  
  .form-item {
    margin-bottom: 40rpx;
    
    .label {
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
      margin-bottom: 20rpx;
    }
  }
}

.type-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10rpx;
  
  .type-item {
    width: calc(25% - 20rpx);
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background: #fff;
    border-radius: 8rpx;
    margin: 10rpx;
    
    text {
      font-size: 28rpx;
      color: #666;
    }
    
    &.active {
      background: #4caf50;
      
      text {
        color: #fff;
      }
    }
  }
}

.textarea {
  width: 100%;
  height: 300rpx;
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #333;
}

.word-count {
  text-align: right;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.upload-box {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10rpx;
  
  .image-item {
    width: calc(33.33% - 20rpx);
    height: 200rpx;
    margin: 10rpx;
    position: relative;
    
    image {
      width: 100%;
      height: 100%;
      border-radius: 8rpx;
    }
    
    .delete-btn {
      position: absolute;
      top: -20rpx;
      right: -20rpx;
      width: 40rpx;
      height: 40rpx;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .iconfont {
        font-size: 24rpx;
        color: #fff;
      }
    }
  }
  
  .upload-btn {
    width: calc(33.33% - 20rpx);
    height: 200rpx;
    margin: 10rpx;
    background: #fff;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    .iconfont {
      font-size: 48rpx;
      color: #999;
      margin-bottom: 10rpx;
    }
    
    text {
      font-size: 24rpx;
      color: #999;
    }
  }
}

.upload-tip {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.input {
  width: 100%;
  height: 80rpx;
  background: #fff;
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
}

.submit-box {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20rpx 30rpx;
  background: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .submit-btn {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background: #4caf50;
    color: #fff;
    font-size: 28rpx;
    border-radius: 40rpx;
    
    &[disabled] {
      background: #ccc;
    }
  }
}
</style> 